<template>
  <div id="sequence" @click="switchType">
    <i class="iconfont icon-shunxubofang" v-show="currentIndex === 0"></i>
    <i class="iconfont icon-suijibofang" v-show="currentIndex === 1"></i>
    <i class="iconfont icon-liebiaoxunhuan" v-show="currentIndex === 2"></i>
    <i class="iconfont icon-danquxunhuan" v-show="currentIndex === 3"></i>
  </div>
</template>

<script>
export default {
  name: 'FooterSequence',
  data () {
    return {
      // types
      types: ['shunxu', 'suiji', 'liebiao', 'danqu'],
      currentIndex: 0
    }
  },
  computed: {
    currentType () {
      return this.types[this.currentIndex]
    }
  },
  methods: {
    switchType () {
      if (this.currentIndex === 3) {
        this.currentIndex = 0
      } else {
        this.currentIndex++
      }
    }
  }
}
</script>

<style scoped lang="less">
#sequence {
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  i {
    cursor: pointer;
    font-size: 20px;
    padding-right: 5px;
  }
}
</style>
